<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    html,body{
        padding:0;
        margin:0;
        height:100%;
        width:100%;
        background: rgb(18, 18, 41);
    }
    .top_title{
        margin-left:30px;
        font-size:16px;
        font-weight:400;
        color:white;
        height: 14px;
        line-height:20px;
    }
    .top_list{
        display:flex;
        flex-direction: column;
        margin-left:30px;
    }
    .top_list_item{
        display:flex;
        align-items:center;
        margin-top:15px;
    }
    .top_list .top_num{
        display: inline-block;
        margin-right:8px;
        width:16px;
        height:16px;
        font-size:14px;
        line-height: 16px;
        font-weight: 600;
        color:white;
        border-radius: 50%;
        text-align: center;
    }
    .top_list .top_list_title{
        display:inline-block;
        margin-right:12px;
        color:#FFFFFF;
        font-size:12px;
        width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: keep-all;
    }
    .top_list .top_num.top_num_active{
        color:#1B2338;
        background-color:#32E9FF;
    }
    .top_list .top_list_value{
        color:#FFFFFF;
        font-weight: 600;
        font-size:12px;
    }
    /* 
        电池组件样式
    */
    .battery_wraper{
        display: inline-block;
        position:relative;
        box-sizing: border-box;
        margin-right:12px;
        width:106px;
        height:16px;
        padding:1px;
        /* background-color:#32E9FF; */
        border:1px solid rgb(50, 233, 255);
    }
    .battery_container{
        display: flex;
        align-items: center;
        position:relative;
        box-sizing: border-box;
        border:1px solid transparent;
        width:100%;
        height:100%;
    }
    .battery_node{
        display: inline-block;
        box-sizing: border-box;
        float:left;
        border-right:1px solid rgb(35, 39, 46);
        width:5%;
        height:100%;
        background-color:#8796B0;
    }
    .battery_node.active_node{
        background-color:#32E9FF;
    }
    </style>
</head>
<body>
    <!-- 图表样例 -->
    <div id="departmentRank" class="top_list">
        <div class="top_list_item">
            <span class="top_num top_num_active">1</span>
            <span class="top_list_title">放射科放射放射科放射</span>
            <div class="battery_wraper">
                <div class="battery_container">
                    <div class="battery_node active_node"></div>
                    <div class="battery_node active_node"></div>
                    <div class="battery_node active_node"></div>
                    <div class="battery_node active_node"></div>
                    <div class="battery_node"></div>
                    <div class="battery_node"></div>
                    <div class="battery_node"></div>
                    <div class="battery_node"></div>
                    <div class="battery_node"></div>
                    <div class="battery_node"></div>
                </div>
            </div>
            <span class="top_list_value">20</span>
        </div>
    </div>
    <script>
        function buildBatteryChart (listId, data) {
            // html 模板
            var listItemTmp = '<div class="top_list_item">{html}</div>';
            var listNumTmp = '<span class="top_num">{text}</span>'
            var listNumActiveTmp = '<span class="top_num top_num_active">{text}</span>'
            var listTitleTmp = '<span title="{title}" class="top_list_title">{text}</span>';
            var topListValTmp = '<span class="top_list_value">{text}</span>';

            var tmpHtml = '';
            var resultHtml = '';

            var maxVal;
            // 生成电池
            var batteryBuild = function (max, cur) {
                var batterrWraperTmp = '<div class="battery_wraper">{html}</div>';
                var batteryContainerTmp = '<div class="battery_container">{html}</div>';
                var batteryNodeTmp = '<div class="battery_node"></div>';
                var batteryActiveNodeTmp = '<div class="battery_node active_node"></div>';
                // active 的数量
                var activeNodeCount = 
                    max === cur && max > 0 ? 20 :
                    max >0 ? Math.round(cur / max * 20) : 0;
                var result = batterrWraperTmp.replace('{html}', batteryContainerTmp);
                var tmp = ''
                for (var i = 0; i < 20; i++) {
                    if (i < activeNodeCount) {
                        tmp += batteryActiveNodeTmp;
                    } else {
                        tmp += batteryNodeTmp;
                    }
                }
                return result.replace('{html}', tmp);
            }

            data.sort(function (a, b) {
                return b.listData[1] - a.listData[1];
            })
            maxVal = data[0].listData[1];

            data.forEach(function (item, index) {
                tmpHtml = '';
                if (index < 3) {
                    tmpHtml += listNumActiveTmp.replace('{text}', index + 1);
                } else {
                    tmpHtml += listNumTmp.replace('{text}', index + 1);
                }
                tmpHtml += listTitleTmp.replace('{text}', item.listData[0]).replace('{title}', item.listData[0]);
                tmpHtml += batteryBuild(maxVal, item.listData[1]);
                tmpHtml += topListValTmp.replace('{text}', item.listData[1]);
                resultHtml += listItemTmp.replace('{html}', tmpHtml);
            })
            document.getElementById(listId).innerHTML = resultHtml;
        }
    </script>
</body>
</html>